<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>实时监控</title>
	<#include '/commons/include/head.ftl'>
	
	<link rel="stylesheet" href="${ctx}/static/vendor/bootstrap/css/bootstrap.min.css">
	<script src="${ctx}/static/vendor/bootstrap/js/bootstrap.min.js"></script>
	<script src="${ctx}/static/vendor/echarts-2.2.7/echarts.js"></script>
</head>

<body style="padding: 10px;overflow: auto;">

	<div class="row">
		<div class="col-md-4">
			<div id="main_gauge_1" style="height:340px"></div>
		</div>
		<div class="col-md-4">
			<div id="main_gauge_2" style="height:340px;"></div>
		</div>
		<div class="col-md-4">
			<div id="main_gauge_3" style="height:340px"></div>
		</div>
	</div>
	
	<div class="row">
		<div class="col-md-6">
			<div class="row">
				<div class="col-md-12">
					<div class="panel panel-info">
						<div class="panel-heading">服务器信息</div>
						<div style="padding: 0 10px;">
							<table class="table" style="margin-bottom: 0px;">
								<tr>
									<td style="width:140px;">IP地址</td>
									<td id="sysinfo_hostIp"></td>
								</tr>
								<tr>
									<td>主机名</td>
									<td id="sysinfo_hostName"></td>
								</tr>
								<tr>
									<td>操作系统的名称</td>
									<td id="sysinfo_osName"></td>
								</tr>
								<tr>
									<td>操作系统的构架</td>
									<td id="sysinfo_arch"></td>
								</tr>
								<tr>
									<td>操作系统的版本</td>
									<td id="sysinfo_osVersion"></td>
								</tr>
								<tr>
									<td>处理器个数</td>
									<td id="sysinfo_processors"></td>
								</tr>
								<tr>
									<td>Java的运行环境版本</td>
									<td id="sysinfo_javaVersion"></td>
								</tr>
								<tr>
									<td>Java供应商的URL</td>
									<td id="sysinfo_javaUrl"></td>
								</tr>
								<tr>
									<td>Java的安装路径</td>
									<td id="sysinfo_javaHome"></td>
								</tr>
								<tr>
									<td>临时文件路径</td>
									<td id="sysinfo_tmpdir"></td>
								</tr>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="col-md-6">
			<div class="row">
				<div class="col-md-12">
					<div class="panel panel-info">
						<div class="panel-heading">实时监控</div>
						<div class="panel-body" style="height: 356px;">
							<div id="line_chart" style="height:330px"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="row">
		<div class="col-md-4">
			<div class="panel panel-primary">
				<div class="panel-heading">警告信息</div>
				<div style="padding: 0 10px;">
					<table class="table" style="margin-bottom: 0px;">
						<tr>
							<td style="height:50px;line-height:34px;">CPU</td> 
							<td id="usage_cpu" style="height:50px;line-height:34px;">当前使用率：13%</td>
						</tr>
						<tr>
							<td style="height:50px;line-height:34px;">服务器内存</td>
							<td id="usage_ram" style="height:50px;line-height:34px;">当前使用率：39%</td>
						</tr>
						<tr>
							<td style="height:50px;line-height:34px;">JVM内存</td>
							<td id="usage_jvm" style="height:50px;line-height:34px;">当前使用率：38%</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="panel panel-primary">
				<div class="panel-heading">预警设置</div>
				<div style="padding: 0 10px;">
					<table class="table" style="margin-bottom: 0px;">
						<tr>
							<td style="width: 140px;line-height:33px;">CPU 使用率超出</td>
							<td>
								<div class="input-group">
									<input type="text" class="form-control" placeholder="请填写警告预设值" value="${cpu}">
									<span class="input-group-btn">
										<button class="btn btn-default" type="button">设置</button>
							      	</span>
							    </div>
							</td>
						</tr>
						<tr>
							<td style="width: 140px;line-height:33px;">JVM 使用率超出</td>
							<td>
								<div class="input-group">
									<input type="text" class="form-control" placeholder="请填写警告预设值" value="${jvm}">
									<span class="input-group-btn">
										<button class="btn btn-default" type="button">设置</button>
							      	</span>
							    </div>
							</td>
						</tr>
						<tr>
							<td style="width: 140px;line-height:33px;">RAM 使用率超出</td>
							<td>
								<div class="input-group">
									<input type="text" class="form-control" placeholder="请填写警告预设值" value="${ram}">
									<span class="input-group-btn">
										<button class="btn btn-default" type="button">设置</button>
							      	</span>
							    </div>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="panel panel-primary">
				<div class="panel-heading">邮箱设置</div>
				<div style="padding: 0 10px;">
					<table class="table" style="margin-bottom: 0px;">
						<tr>
							<td style="width: 88px;line-height:33px;">邮箱地址：</td>
							<td>
								<div class="input-group">
									<input type="text" class="form-control" placeholder="admin_xxx_@gmail.com">
									<span class="input-group-btn">
										<button class="btn btn-default" type="button">设置</button>
							      	</span>
							    </div>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
	
	
	
	<script>
		//路径配置
        require.config({
        	paths: {echarts: '${ctx}/static/vendor/echarts-2.2.7'}
        }); 
        require(
        	[
        		'echarts',
                'echarts/chart/bar', 
                'echarts/chart/line', 
                'echarts/chart/gauge' 
        	],
        	function(ec) {
        		$.get('${ctx}/manager/system/monitor/monitor_system_info', function(result) {
        			$("#sysinfo_hostIp").html(result.hostIp);
        			$("#sysinfo_hostName").html(result.hostName);
        			$("#sysinfo_osName").html(result.osName);
        			$("#sysinfo_arch").html(result.arch);
        			$("#sysinfo_osVersion").html(result.osVersion);
        			$("#sysinfo_processors").html(result.processors);
        			$("#sysinfo_javaVersion").html(result.javaVersion);
        			$("#sysinfo_javaUrl").html(result.javaUrl);
        			$("#sysinfo_javaHome").html(result.javaHome);
        			$("#sysinfo_tmpdir").html(result.tmpdir);
        			
				}, 'json').error(function() {  });
					
					
				var now = new Date();
				var res = [];
				var len = 20;
				
				while (len--) {
					var time = now.toLocaleTimeString().replace(/^\D*/, '');
					time = time.substr(time.indexOf(":") + 1);
					res.unshift(time);
					now = new Date(now - 1000);
				}
				var line_option = {
					legend : {
						data : [ 'jvm内存使用率', '物理内存使用率', 'cpu使用率' ]
					},
					grid : {
						x : 40,
						y : 30,
						x2 : 10,
						y2 : 35,
						borderWidth : 0,
						borderColor : "#FFFFFF"
					},
					xAxis : [ {
						axisLabel : {
							rotate : 40,
						},
						type : 'category',// 坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
						data : res
					} ],
					yAxis : [ {
						min : 0,
						max : 100,
						axisLabel : {
							formatter : '{value}%'
						}
					} ],
					series : [
							{
								name : 'jvm内存使用率',
								type : 'line',
								data : [ 12, 25, 31, 11, 45, 50, 11, 09, 28, 35, 40, 24,
										28, 39, 23, 31, 14, 18, 08, 36 ]
							},
							{
								name : '物理内存使用率',
								type : 'line',
								data : [ 55, 41, 10, 23, 15, 44, 29, 41, 27, 05, 12, 25,
										31, 11, 45, 50, 11, 09, 28, 35 ]
							},
							{
								name : 'cpu使用率',
								type : 'line',
								data : [ 40, 24, 28, 39, 23, 31, 14, 18, 08, 36, 55, 41,
										10, 23, 15, 44, 29, 41, 27, 05 ]
							} ]
				};
				
				
                var gauge_option_1 = {
                	tooltip : {
						formatter: "{a} <br/>{b} : {c}%"
					},
		    		series : [
				        {
				        	title:{
				        	    show : true,
				        	    offsetCenter: [0, "95%"],
				        	},
				        	pointer: {
				                color: '#FF0000'
				            },
				            name:'监控指标',
				            radius:[0, '95%'],
				            axisLine: {            // 坐标轴线
				                lineStyle: {       // 属性lineStyle控制线条样式
				                    width: 20
				                }
				            },
				            detail : {formatter:'{value}%'},
				            type:'gauge',
				            data:[{value: 50, name: 'JVM使用率'}]
			        	}
	    			]
                };
                
                var gauge_option_2 = {
                	tooltip : {
			        	formatter: "{a} <br/>{b} : {c}%"
			    	},
			    	series : [{
			            name:'监控指标',
			            type:'gauge',
			            startAngle: 180,
			            endAngle: 0,
			            center : ['50%', '85%'],    // 默认全局居中
			            radius : 180,
			            
			            axisLine: {            // 坐标轴线
			                lineStyle: {       // 属性lineStyle控制线条样式
			                    width: 140
			                }
			            },
			            axisTick: {            // 坐标轴小标记
			                splitNumber: 10,   // 每份split细分多少段
			                length :12,        // 属性length控制线长
			            },
			            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
			               
			                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
			                    color: '#fff',
			                    fontSize: 15,
			                    fontWeight: 'bolder'
			                }
			            },
			          
			            pointer: {
			                width:10,
			                length: '80%',
			                color: 'rgba(255, 255, 255, 0.5)'
			            },
			            title : {
			                show : true,
			                offsetCenter: [0, 15],       // x, y，单位px
			               /* textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
			                    color: '#fff',
			                    fontSize: 25
			                }*/
			            },
		            	detail : {
			                show : true,
			                backgroundColor: 'rgba(0,0,0,0)',
			                borderWidth: 0,
			                borderColor: '#ccc',
			                offsetCenter: [0, -40],       // x, y，单位px
			                formatter:'{value}%',
			                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
			                    fontSize : 20
		                	}
		            	},
		            	data:[{value: 50, name: 'CPU使用率'}]
		        	}]
                };
                
                
                var lineChart = ec.init(document.getElementById('line_chart'));
                var gaugeChart_1 = ec.init(document.getElementById('main_gauge_1')); 
                var gaugeChart_2 = ec.init(document.getElementById('main_gauge_2')); 
                var gaugeChart_3 = ec.init(document.getElementById('main_gauge_3')); 
                
                
                lineChart.setOption(line_option);
				gaugeChart_1.setOption(gauge_option_1);
				gaugeChart_2.setOption(gauge_option_2);
				
				gauge_option_1.series[0].data[0].name ='内存使用率';
	 			gauge_option_1.series[0].pointer.color='#428bca'
				gaugeChart_3.setOption(gauge_option_1);
				
				
                setTimeout(function (){
				    window.onresize = function () {
				    	lineChart.resize;
				        gaugeChart_1.resize;
				        gaugeChart_2.resize;
				        gaugeChart_3.resize;
				    }
				},200);
				
				
				var axisData;
				//定时获取系统信息（CPU，服务器内存， JVM内存）
				clearInterval(timeTicket);
				var timeTicket = setInterval(function() {
					axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
					axisData = axisData.substr(axisData.indexOf(":") + 1);
					var jvm = [];
					var ram = [];
					var cpu = [];
					$.get('${ctx}/manager/system/monitor/monitor_usage', function(result) {
						$('#usage_cpu').html('当前使用率：'+result.cpuUsage+'%');
						$('#usage_ram').html('当前使用率：'+result.ramUsage+'%');
						$('#usage_jvm').html('当前使用率：'+result.jvmUsage+'%');
						
						jvm.push(result.jvmUsage);
						ram.push(result.ramUsage);
						cpu.push(result.cpuUsage);
						
						
						gauge_option_1.series[0].data[0].value =result.jvmUsage;
						gauge_option_1.series[0].data[0].name ='JVM使用率';
						gauge_option_1.series[0].pointer.color='#FF0000'
						gaugeChart_1.setOption(gauge_option_1, true);
				
						gauge_option_2.series[0].data[0].value =result.cpuUsage;
						gaugeChart_2.setOption(gauge_option_2, true);
				
						gauge_option_1.series[0].data[0].value =result.ramUsage;
						gauge_option_1.series[0].data[0].name ='内存使用率';
						gauge_option_1.series[0].pointer.color='#428bca'
						gaugeChart_3.setOption(gauge_option_1, true);
						
						// 动态数据接口 addData
						lineChart.addData([ 
											[ 
												0, // 系列索引
												jvm, // 新增数据
												false, // 新增数据是否从队列头部插入
												false, // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
											], 
											[ 
												1, // 系列索引
												ram, // 新增数据
												false, // 新增数据是否从队列头部插入
												false, // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
											], 
											[ 
												2, // 系列索引
												cpu, // 新增数据
												false, // 新增数据是否从队列头部插入
												false, // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
												axisData // 坐标轴标签
											] 
						]);
						
						
						
					}, 'json').error(function() {  });
				}, 3000);
				
        	}
        );/*********************require end************************/
	</script>
</body>
</html>

